<template>
  <!--
  label:当前表单输入框前的名称，如： label="department.headerCode" 则当前表单名称显示department.headerCode的国际化
  prop:表单验证
  selectedVal:内部下拉框的数据绑定

  val2Label,val3Label:国际化处理后的 下拉框打开之后显示的标题

  options:下拉框数据源（后台查询不需要设置别名 as value；as label，查到什么传什么）

  val1:下拉框每一行的id
  val2:选择框第一列内容（主要内容，可搜索）
  val3:选择框第二列内容（扩展内容）

  event-type:事件绑定，定义event-type后，再绑定方法 如：event-type="chooseDepart"  @chooseDepart="方法名随意"
 -->
  <el-form-item :label="$t(label)" :prop="prop" class="hibaoSelectForm">
    <el-select
      v-model="selectedVal"
      :clearable="clearable"
      :disabled="disabled"
      filterable
      :placeholder="$t('input.plzChoose')"
      :style="showButton && label ? styleObj : ''"
      @change="change"
    >
      <div v-if="showTitle" class="dropdownTitleDiv">
        <span v-if="val2" class="dropdownTitle">{{ $t(val2Label) }}</span>
        <span v-if="val3" class="dropdownTitle">{{ $t(val3Label) }}</span>
      </div>
      <el-option
        v-for="item in options"
        :key="item[val1]"
        :value="item[val1]"
        :label="item[val2]"
      >
        <span v-if="item[val2]" class="dropdownSpan" :title="item[val2]">{{ item[val2] }}</span>
        <span v-if="item[val3]" class="dropdownSpan" :title="item[val3]">{{ item[val3] }}</span>
      </el-option>
    </el-select>
    <div v-if="showButton" class="chooseButtonDIV">
      <el-button :class="label ? 'chooseButton el-icon-thumb' : 'chooseButtonInner el-icon-thumb'" @click.stop="choose" />
    </div>
  </el-form-item>
</template>

<script>
export default {
  name: 'SelectForm',
  props: {
    label: {
      type: String,
      default: ''
    },
    val1: {// 选择框单项 Id
      type: String,
      default: 'val1'
    },
    val2: {// 选择框第一列内容（主要内容，可搜索）
      type: String,
      default: 'val2'
    },
    val3: {// 选择框第二列内容（扩展内容）
      type: String,
      default: 'val3'
    },
    prop: {// 传入表单验证规则
      type: String,
      default: ''
    },
    options: {// 选择框数据源
      type: Array,
      default() {
        return []
      }
    },
    prefix: {
      type: String,
      default: ''
    },
    eventType: { // 按钮事件 必须属性
      type: String,
      default: ''
    },
    changeType: { // 改变事件 必须属性
      type: String,
      default: ''
    },
    value: {// 接收外部传过来的参数，外部v-model绑定的参数
      type: [String, Number]
    },
    clearable: {// 是否可被清空
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    styleObj: {// input框样式
      type: Object,
      default: () => {
        return {
          width: '80%'
        }
      }
    },
    showTitle: {// 是否显示title
      type: Boolean,
      default: true
    },
    showButton: {// 是否显示按钮
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      val2Label: this.showTitle ? this.label ? this.$t(this.label.split('.')[0] + '.' + this.val2) : this.prefix + '.' + this.val2 : '',
      val3Label: this.showTitle ? this.label ? this.$t(this.label.split('.')[0] + '.' + this.val3) : this.prefix + '.' + this.val3 : ''
    }
  },
  computed: {
    selectedVal: {
      get: function() {
        return this.value
      },
      set: function(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    choose() {
      this.$emit(this.eventType)
    },
    change(val) {
      const obj = this.options.find(item => item[this.val1] === val)
      // 调用父方法，给输入框传值
      this.$emit(this.changeType, obj)
    }
  }
}
</script>
<style scoped>
  .dropdownSpan{
    display: inline-block;
    width: 100px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .dropdownTitle{
    display: inline-block;
    width: 100px;
    font-size: 13px;
    margin-left: 20px;
    line-height: 28px;
    color: grey;
  }
  .dropdownTitleDiv{
    height: 28px;
    padding: 0;
    background-color: #F5F7FA;
    z-index: 1;
    /*position: fixed;*/

  }
  .el-select-dropdown__wrap,.el-scrollbar__wrap{
    max-height: 200px !important;
  }
  .chooseButtonDIV{
    display: inline-block;
    position: fixed
  }
  .chooseButtonDIV button{
    padding: 0px 5px;
    font-size: 20px;
  }
  .chooseButton{
    padding: 7px;
    height: 28px;
    margin-left: 10px;
    border-color: #C0C4CC
  }
  .chooseButtonInner{
    padding: 7px;
    height: 28px;
    border-color: #C0C4CC
  }
</style>

